<template>
  <v-app>
    <v-toolbar :color="color" dark fixed app>
      <!--<v-toolbar-side-icon></v-toolbar-side-icon>-->
      <!--<v-toolbar-title>Application</v-toolbar-title>-->
      <v-layout row>
        <v-flex xs8 offset-xs2>
          <v-card class="card--flex-toolbar">
            <v-toolbar card color="white" prominent>
              <v-toolbar-title class="body-2 grey--text">Title</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-btn icon>
                <v-icon>search</v-icon>
              </v-btn>
              <v-btn icon>
                <v-icon>apps</v-icon>
              </v-btn>
              <v-btn icon>
                <v-icon>more_vert</v-icon>
              </v-btn>
            </v-toolbar>
            <v-divider></v-divider>
            <v-card-text style="height: 200px;"></v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>
          <v-tooltip right>
            <v-btn icon large :href="source" target="_blank" slot="activator">
              <v-icon large>code</v-icon>
            </v-btn>
            <span>Source</span>
          </v-tooltip>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer :color="color" app>
      <span class="white--text">&copy; 2017</span>
    </v-footer>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      color: 'lighten-1 teal'
    }),
    props: {
      source: String
    }
  }
</script>

<style lang="scss">

</style>
